<!--  -->
<template>
  <div class="housing">
    <div class="housingtop">
      <span>房源管理</span>
    </div>
    <div class="housingmain">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="销售楼盘" name="first">
          <!-- 三级联动 -->
          <div class="sanji">
            <city></city>
            <!-- 搜索 -->
            <div class="block">
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 150px"
              ></el-input>
              <button @click="sou()">搜索</button>
            </div>
          </div>

          <!-- 新增 -->
          <el-button @click="centerDialogVisible = true" class="xin"
            >新增</el-button
          >

          <el-dialog :visible.sync="centerDialogVisible" width="50%" center>
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item label="楼盘名称">
                <el-input v-model="ipt1"></el-input>
              </el-form-item>
              <el-form-item label="所在区域">
                <el-input v-model="ipt2"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input v-model="ipt3"></el-input>
              </el-form-item>
              <el-form-item label="时间">
                <el-input v-model="ipt5"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="ipt4"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="btn()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 增删改查 -->
          <el-table :data="list" border style="width: 97%">
            <el-table-column prop="id" label="序号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="楼盘名称" width="200">
            </el-table-column>
            <el-table-column prop="region" label="所在区域" width="150">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="120">
            </el-table-column>
            <el-table-column prop="time" label="更新时间" width="150">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="150">
            </el-table-column>
            <el-table-column prop="zip" label="状态" width="150">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.zt"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeSwitch(scope.row.zt)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">户型</el-button>
                <el-button type="text" size="small">相册</el-button>
                <el-button type="text" size="small">动态</el-button>
                <el-button type="text" size="small">沙盘</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 编辑弹框 -->
          <el-dialog :visible.sync="dialogVisible" width="50%" center>
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item label="楼盘名称">
                <el-input v-model="ipt1"></el-input>
              </el-form-item>
              <el-form-item label="所在区域">
                <el-input v-model="ipt2"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input v-model="ipt3"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="ipt4"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="KO()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 分页 -->
          <div class="paging">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageindex"
              :page-sizes="[5, 10]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="房屋租赁" name="second">
          <!-- 三级联动 -->
          <div class="sanji">
            <city></city>
            <!-- 搜索 -->
            <div class="block">
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 150px"
              ></el-input>
              <button @click="sou()">搜索</button>
            </div>
          </div>

          <!-- 新增 -->
          <el-button @click="centerDialogVisible = true" class="xin"
            >新增</el-button
          >

          <el-dialog :visible.sync="centerDialogVisible" width="50%" center>
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item label="小区名称">
                <el-input v-model="ipt1"></el-input>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="ipt2"></el-input>
              </el-form-item>
              <el-form-item label="面积">
                <el-input v-model="ipt3"></el-input>
              </el-form-item>
              <el-form-item label="总价">
                <el-input v-model="ipt5"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="ipt4"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="btn()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 增删改查 -->
          <el-table :data="list" border style="width: 97%">
            <el-table-column prop="id" label="序号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="小区名称" width="200">
            </el-table-column>
            <el-table-column prop="region" label="标题" width="150">
            </el-table-column>
            <el-table-column prop="price" label="面积" width="120">
            </el-table-column>
            <el-table-column prop="time" label="总价" width="150">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="150">
            </el-table-column>
            <el-table-column prop="zip" label="状态" width="150">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.zt"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeSwitch(scope.row.zt)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 编辑弹框 -->
          <el-dialog :visible.sync="dialogVisible" width="50%" center>
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item label="小区名称">
                <el-input v-model="ipt1"></el-input>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="ipt2"></el-input>
              </el-form-item>
              <el-form-item label="面积">
                <el-input v-model="ipt3"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="ipt4"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="KO()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 分页 -->
          <div class="paging">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageindex"
              :page-sizes="[5, 10]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
            >
            </el-pagination></div
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeName: "first",
      centerDialogVisible: false,
      dialogVisible: false,

      list: [],

      ids: "",
      ipt1: "",
      ipt2: "",
      ipt3: "",
      ipt5: "",
      ipt4: "",

      input: "",
      pageindex: 1,
      pagesize: 5,
      total: 0,
    };
  },
  //监听属性 类似于data概念
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getliat();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.getliat();
    },
    //状态
    changeSwitch(obj) {
      console.log(obj);
    },
    handleChange(value) {
      console.log(value);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 编辑
    handleEdit(row) {
      console.log(row, "row");
      this.ids = row.id;
      this.dialogVisible = true;
      (this.ids = row.id),
        (this.ipt1 = row.name),
        (this.ipt2 = row.region),
        (this.ipt3 = row.price),
        (this.ipt4 = row.sort);
    },

    KO() {
      axios.get("/api/edit", {
        params: {
          id: this.ids,
          name: this.ipt1,
          region: this.ipt2,
          price: this.ipt3,
          sort: this.ipt4,
        },
      });
      this.getliat();

      this.dialogVisible = false;
    },

    //删除
    handleDelete(id) {
      console.log(id);
      axios.delete(`/api/del/${id}`).then((res) => {
        console.log(res);
        this.$router.go(0);
      });
    },
    // 添加
    btn() {
      console.log(this.ipt1);
      axios
        .get("/api/add", {
          params: {
            name: this.ipt1,
            region: this.ipt2,
            price: this.ipt3,
            time: this.ipt5,
            sort: this.ipt4,
          },
        })
        .then((res) => {
          console.log(res);
          this.$router.go(0);
        });
      this.getliat();
    },
    // 搜索
    sou() {
      // console.log("input", this.input);
      axios.get(`/api/search?name=${this.input}`).then((res) => {
        this.list = res.data;
      });
    },

    // 数据

    getliat() {
      axios
        .get("/api/list", {
          params: { pageindex: this.pageindex, pagesize: this.pagesize },
        })
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getliat();

    // axios.get("/api/list").then((res) => {
    //   console.log(res);
    //   this.list = res.data;
    // });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.housing {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eee;
  .housingtop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
  }
  .housingmain {
    width: 98%;
    height: 750px;
    background: #fff;
    margin: 0 20px;
  }
}
.sanji {
  width: 100%;
  display: flex;
  margin: 10px;
  .block {
    margin: 0 10px;
    button {
      width: 100px;
      height: 40px;
      margin: 0 10px;
      border: none;
      background: skyblue;
      border-radius: 8px;
      color: #fff;
    }
  }
}
.xin {
  width: 100px;
  height: 40px;
  margin: 5px 20px;
  background: skyblue;
  color: #fff;
}
.el-table {
  margin: 0 auto;
}
.paging {
  margin: 10px 0;
  text-align: right;
  margin-right: 30px;
}
select {
  width: 200px;
  height: 35px;
}
</style>
